<template>
	<div style="margin-top:2px;background:white;padding:0 30rpx" v-if="playerList.length> 0">
		<div class="title acea-row row-between-wrapper" style="padding: 10px 0;">
			<div class="text">
				<div class="name line1">{{title}}</div>
			</div>
			<div @click="$router.push({ path: '/pages/LiveBroadcas/mcLive/index/index'})" class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
		</div>
		<div :style="{backgroundColor: config.backgroundColor}">
			<div v-for="(item,index) in playerList" :key="index" class="player_list_li" @click="toRoom(item.roomId)">
				<div class="player_list_img">
					<img class="player_list_coverImage" :src="item.coverImg" alt="">
					<!--<div class="player_list_img">
                  <div class="player_list_status status_living" v-if="item.status=='living'">直播中</div>
                  <div class="living_nlookers" v-show="item.views!=null" v-if="item.status=='living'">{{item.views}} 人气</div>
                  <div class="player_list_status status_default" v-if="item.status=='default'">待开播</div>
                  <div class="player_list_status status_finish" v-if="item.status=='finish'">已结束</div>
                  <div class="player_list_status status_replay" v-if="item.status=='replay'">回放</div>
                  <div class="replayo_nlookers" v-show="item.views>1" v-if="item.status=='replay'">{{item.views}} 人气</div>
                </div>-->
					<div>
						<template v-if="item.liveStatus === 101">
							<div class="player_list_status status_living">直播中</div>
						</template>
						<template v-else-if="item.liveStatus === 102">
							<div class="player_list_status status_default">未开始</div>
						</template>
						<template v-else-if="item.liveStatus === 103">
							<div class="player_list_status status_finish">已结束</div>
						</template>
						<template v-else-if="item.liveStatus === 104">
							<div class="player_list_status status_finish">禁播</div>
						</template>
						<template v-else-if="item.liveStatus === 105">
							<div class="player_list_status status_finish">暂停</div>
						</template>
						<template v-else-if="item.liveStatus === 106">
							<div class="player_list_status status_finish">异常</div>
						</template>
						<template v-else-if="item.liveStatus === 107">
							<div class="player_list_status status_finish">已过期</div>
						</template>
					</div>
				</div>
				<div style="display:flex">
					<div class="player_list_title">{{item.name}}</div>
					<div class="player_look" @click="toRoom(item.roomId)">围观&nbsp;&rsaquo;</div>
				</div>
			</div>
		</div>
		<!-- <van-dialog
        title="提示"
        :show="authDialogShow"
        message="小程序需要您登录获取您的头像、昵称等信息"
        show-cancel-button
        confirm-button-text="登录"
        @cancel="authDialogShow = false"
        confirm-button-open-type="getUserInfo"
        @getuserinfo="getUserInfo"
    >
    </van-dialog>-->
	</div>
</template>

<script>
	import {
		getMcLivePageList
	} from '@/api/player';
	// 判断是否有授权checkAuthentication
	import {
		checkAuthentication,
	} from "@/utils";
	export default {
		name: "product-list",
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				authDialogShow: false,
				playerList: [
					{coverImg:'https://img.pconline.com.cn/images/upload/upc/tx/pc_best/2012/23/c229/246859306_1608720070325.jpg',liveStatus:102,name:'大王叫我来巡山'}
				],
				type: '',
				title: '商户直播',
				status: '',
				id: ''
			};
		},
		mounted() {
			// console.log("获取的直播列表config",this.config)
			//this.getData()
		},
		onShow() {
			this.authDialogShow = false
			//this.getData()
		},
		methods: {
			getData() {
				/*let param = {ids: this.config.ids.join(','),limit:this.config.count}
				getPlayer(param).then(res => {
				  // console.log("获取直播列表是什么",res.data)
				  if (res.status == 200) {
				    this.playerList = res.data.records;
				  }
				})*/
				getMcLivePageList({
					pageSize: this.config.count,
					pageNumber: 1
				}).then(res => {
					this.playerList = res.data.content
				}).catch(err => {
					wx.hideLoading()
				})
				this.type = this.config.type;
				this.title = this.config.title;
			},
			//刷新用户信息并跳转
			getUserInfo() {
				/*console.log("用户授权过了-----------------------------")
				if(this.status=="living"){
				  const url = '/pages/LiveBroadcas/player/room/main?id='+this.id
				  wx.navigateTo({ url: url })
				}else if(this.status=="default"){
				  wx.navigateTo({ url: "/pages/LiveBroadcas/player/notice/main?id="+this.id})
				}else if(this.status=="replay"){
				  wx.navigateTo({ url: "/pages/LiveBroadcas/player/replay/main?id="+this.id})
				}*/
			},
			//跳转直播间
			toRoom(id) {
				wx.navigateTo({
					url: 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + id
				})
			},
		},
		computed: {}
	};
</script>

<style scoped>
	.more {
		font-size: 26rpx;
		color: #999999
	}

	.player_list_li {
		/* margin-bottom: 30rpx; */
		/* box-shadow: 5rpx 5rpx 5rpx 5rpx #F8F8F8; */
	}

	.player_list_img {
		position: relative;
		height: 345rpx;
		border-radius: 25rpx;
		/* background-color: lightpink; */
	}

	.player_look {
		color: #FF563D;
		background: rgba(255, 86, 61, 0.1);
		border-radius: 25rpx;
		font-size: 28rpx;
		height: 50rpx;
		width: 110rpx;
		text-align: center;
		line-height: 50rpx;
		position: absolute;
		right: 30rpx;
		margin-top: 25rpx;
	}

	.player_list_coverImage {
		width: 100%;
		height: 100%;
		border-radius: 25rpx;
	}

	.player_list_title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		width: 80%;
	}

	.player_list_status {
		height: 46rpx;
		padding: 0 15rpx;
		font-size: 26rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.replayo_nlookers {
		height: 46rpx;
		padding: 0 15rpx;
		font-size: 26rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		position: absolute;
		padding-left: 90rpx;
		top: 0;
		left: 0;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2)
	}

	.status_living {
		background: linear-gradient(to right, #FF7A45, #FF4545);
		color: #ffffff;
		z-index: 1;
	}

	.living_nlookers {
		height: 46rpx;
		padding: 0 15rpx;
		font-size: 24rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		position: absolute;
		padding-left: 110rpx;
		top: 0;
		left: 0;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2)
	}

	.status_default {
		background: linear-gradient(to right, #FFC445, #FF9845);
		color: #ffffff;
	}

	.status_finish {
		background-color: #999999;
		color: #ffffff;
	}

	.status_replay {
		background: linear-gradient(to right, #6C45FF, #45A5FF);
		z-index: 1;
		color: #ffffff;
	}

	.player_list_prompt {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.player_list_prompt p {
		font-size: 28rpx;
		color: #666666;
	}

	.player_list_like {
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
	}

	.thumbupCount {
		position: absolute;
		/* width: 64rpx; */
		padding: 0 10rpx;
		height: 30rpx;
		color: #FFFEFE;
		font-size: 26rpx;
		background-color: rgba(0, 0, 0, 0.1);
		border-top-left-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 25rpx;
		bottom: 0rpx;
		right: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
